import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  SearchOutlined,
  SettingOutlined,
  LogoutOutlined
} from '@ant-design/icons';
import { Layout, Dropdown } from 'antd';
import React, { useState } from 'react';
import { eventBus } from '../../utils/eventBus';
import { useNavigate } from 'react-router-dom'
const { Header } = Layout;


export default function ProjectHeader() {
  const [collapsed, setCollapsed] = useState(false);
  const [display, setdisplay] = useState('none')
  const navigate = useNavigate()
  const items = [
    {
      key: '1',
      icon: <UserOutlined />,
      label: (
        <div>个人中心</div>
      ),
    },
    {
      key: '2',
      icon: <SearchOutlined />,
      label: (
        <div>密码修改</div>
      ),
    },
    {
      key: '3',
      icon: <SettingOutlined />,
      label: (
        <div className='bord'>系统定制</div>
      ),
    },
    {
      key: '4',
      icon: <LogoutOutlined />,
      label: (
        <div onClick={() => clearuser()}>退出登录</div>
      ),
    },
  ];
  function clearuser() {
    alert('成功')
    localStorage.clear()
    navigate('/login')
  }
  function tablecss() {
    if (display === '') {
      setdisplay('none')
    } else {
      setdisplay('')
    }
  }
  const data = JSON.parse(localStorage.user)
  console.log(data)
  return (
    <Header
      className="site-layout-background header-a"
      style={{
        paddingLeft: 20,
        display: 'flex',
        alignItems: 'center'
      }}
    >
      {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: 'trigger',
        onClick: () => (setCollapsed(!collapsed), tablecss(), eventBus.emit('shide', !collapsed), eventBus.emit('shide1', display))
      })}
      <div className='setbox'>
        <div><img className='imga' src={"http://xawn.f3322.net:8002/distremote/static/avatar/" + data.avatar} alt="" /></div>



        <Dropdown
          menu={{
            items,
          }}
          placement="bottomRight"

        >
          <div> {data.username}</div>

        </Dropdown>

      </div>

    </Header>
  )
}
